<link rel="stylesheet" href="/view/menu.css">
<div class="mainmenu">
    <div class="menu-left">HuaYang</div>
    {% set menus=["Home","Cate","Shop"] %}
    <div class="menu-mid">
        {% for obj in menus%}
        {% set idx = menus.index(obj) %}
        <div class="menu-item" onclick="menuHandle(this,{{idx}})">
            {{obj}}</div>
        {% endfor%}
    </div>
    <div class="menu-right">
        {% if 1==0 %}
        <div>Login</div>
        <div>|</div>
        <div>Regist</div>
        {% else %}
        <div style="display: flex;align-items: center;">
            <img src="https://cdn.novenn.com/random/avatars/1595853486899.jpg" style="border-radius: 20px;margin-right: 12px;" width="40px" alt="" srcset="">
            <div>exit</div>
        </div>
        {% endif %}
    </div>

</div>

<script>
    els = document.getElementsByClassName("menu-item")
    idx = sessionStorage.getItem("midx") | 0;
    el = els[idx];
    el.classList.add("active")

    function menuHandle(obj, idx) {
        for (const el of els) {
            el.classList.remove("active");
        }
        obj.classList.add("active");
        sessionStorage.setItem("midx", idx)

        if (idx == 0) {
            location.href = "/"
        }
        if (idx == 1) {
            location.href = "/cate"
        }
    }
</script>